<script setup lang="ts">
  import useService from './service'
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  import { RefreshRight, Search } from '@element-plus/icons-vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HButton from '@/components/common/button/HButton.vue'

  const props = defineProps({
    factoryId: {
      type: String,
      required: true,
    },
  })

  // 使用服务
  const { list, total, loading, getList } = useService

  // 分页组件实例
  const paginationRef = ref<InstanceType<typeof Pagination> | null>(null)

  // 列表筛选条件
  const filter = ref({
    name: '',
    limit: 50,
    page: 1,
  })

  /**
   * 组装请求参数
   */
  const getParam = () => {
    const result = { ...filter.value }
    if (paginationRef.value) {
      result.limit = paginationRef.value.size
      result.page = paginationRef.value.current
    }
    return result
  }

  /**
   * 请求数据方法
   */
  const getData = () => {
    getList(props.factoryId, getParam())
  }

  /**
   * 重置事件
   */
  const onReset = () => {
    filter.value.name = ''
    getData()
  }

  defineExpose({
    getData,
  })
</script>

<template>
  <div class="account_manager_list">
    <div class="search">
      <el-input style="width: 120px" @keyup.enter="getData" v-model="filter.name" clearable placeholder="请输入" />
      <div class="filter">
        <HButton type="primary" @click="getData">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </HButton>
        <HButton @click="onReset">
          <el-icon>
            <RefreshRight />
          </el-icon>
          重置
        </HButton>
      </div>
    </div>
    <el-table
      :border="true"
      stripe
      resizable
      style="width: 100%"
      height="100%"
      :data="list"
      v-loading="loading"
    >
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column label="序号" type="index" width="50" align="center" />
      <el-table-column show-overflow-tooltip prop="username" label="账号名称" width="120" />
      <el-table-column show-overflow-tooltip prop="phone" label="手机号" width="140" />
      <el-table-column show-overflow-tooltip prop="" label="状态" width="80">
        <template #default="scope">
          <HStatus type="info" v-if="scope.row.depart">禁用</HStatus>
          <HStatus v-else>启用</HStatus>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="createTime" label="添加时间" width="130" />
      <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="130" />
    </el-table>
    <div class="pagination">
      <Pagination
        ref="paginationRef"
        :list_total="total"
        @size-change="getData"
        @current-change="getData"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .account_manager_list {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;

    .search {
      display: flex;
      justify-content: flex-end;
      gap: 5px;
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
